<template>
  <div class="container">
    <div class="product" v-for="product,index in productList"
         v-bind:key="index">
      <span style="color: #42578E;font-size: 18px;font-weight: bold">{{product.name}}</span>
      <div style="display: flex;flex-direction: row">
        <div style="flex-direction: column;display: flex;text-align: left;flex: 1">
          <div><span style="font-size: 30px;color: #E16A53">{{product.rate}}</span> <span
            style="font-size: 15px;color: #E16A53">%</span></div>
          <span style="font-size: 15px;line-height: 15px;margin-top: 0px;color:#8A919C">业界比较基准</span>
        </div>
        <div style="flex-direction: column;display: flex;text-align: center;flex: 1;padding-top:11px">
          <span style="color: #42578E;font-size: 18px;font-weight: bold;">{{product.term}}</span>
          <span style="font-size: 15px;line-height: 15px;margin-top: 9px;color:#8A919C">投资期限</span>
        </div>
        <div
          style="flex-direction: column;display: flex;text-align: right;flex: 1;padding-top: 12px;padding-right: 15px;">
          <span style="color: #42578E;font-size: 18px;font-weight: bold">{{product.investmentBottomLine}}</span>
          <span style="font-size: 15px;line-height: 15px;margin-top: 8px;color:#8A919C">起购金额</span>
        </div>
      </div>
    </div>
    <div class="banner">
      <img :src="bannerImageUrl" style="width: 95%"/>
    </div>

    <span style="justify-content: center;text-align: center;padding: 8px;color:#3399EB;font-size: 14px;margin-left: -15px">查看更多</span>
  </div>

</template>

<script>
  import BunnerImgUrl from '@/assets/image/banner_finance_product.png'

  export default {
    name: 'HelloWorld',
    props: ['productList'],
    data () {
      return {
        bannerImageUrl: BunnerImgUrl
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .container {
    display: flex;
    flex-direction: column;
    padding: 0px 0px 0px 15px;
    background: white;
  }

  .product {
    display: flex;
    flex-direction: column;
    padding-top: 10px;
    padding-bottom: 8px;
  }

  .product::after {
    content: "";
    display: inline-block;
    width: 100%;
    height: 1px;
    top: 8px;
    background: #F8F8F8;
    position: relative;
  }

  .banner {
    background: white;
    display: block;
    justify-content: center;
    text-align: center;
    margin-left: -15px;
    padding-top: 10px
  }

  .banner::after {
    content: "";
    width: 100%;
    height: 1px;
    display: block;
    top: 0px;
    background: #F8F8F8;
    position: relative;
  }
</style>
